<template>
  <div class="">
    <view class="mySelect_show">
      <view class="mySelect_l">
        <template v-if="item.isLabels">
          {{inLabel}}
        </template>
        <template v-else>
          <div class="multi_buttons">
            <div class="button" v-for="(it,i) in checkList" :key="i">
              <div class="button_close iconfont icon_guanbixiao" @click="remove(it,i)"></div>
              {{it.label}}
            </div>
          </div>
        </template>
      </view>
      <view class="mySelect_r iconfont" @click="openUp(true)">&#xe60c;</view>
    </view>
    <view class="popup" v-if="show">
      <div class="popup_mask" @click="openUp(false)"></div>
      <div class="myPop">
        <div class="myPop_head">
          <div class="myPop_cancel" @click="close">清空</div>
          <div class="myPop_name">{{item.title||item.label||''}}</div>
          <div class="myPop_confirm" @click="confirm">确认</div>
        </div>
        <scroll-view class="myPop_main" scroll-y="true"  @scrolltolower="scrolltolower">
          <div class="myPop_item" :style="[itemStyle]" v-for="(item,index) in inList" :key="item.value" @click="check(item,index)">
            <div v-if="isSlot">
              <!-- #ifdef MP-WEIXIN -->
              <slot name="slot{{item.$orig.index}}"></slot>
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <slot v-bind="item"></slot>
              <!-- #endif -->
            </div>
            <div class="item_name" v-if="!isSlot">
              <text >{{item.label}}</text>
            </div>
            <div  v-if="!isSlot" class="item_check iconfont" :class="[isCheck(item)]" :style="[getStyle(item)]"></div>
          </div>
        </scroll-view>
      </div>
    </view>
  </div>
</template>
<script>
  import {backType} from "./util";

  export default {
    name:'multiSelect',
    props: {
      // item
      item:{
        default:()=>{
          return {}
        }
      },
      // 是否用slot
      isSlot:{
        default:()=>{
          return false
        }
      },
      // 单个样式
      itemStyle:{
        default:()=>{
          return {}
        }
      },
      // 选中样式
      chooseStyle:{
        default:()=>{
          return {}
        }
      },
      // 未选中样式
      noChooseStyle:{
        default:()=>{
          return {}
        }
      },
      // 标题
      title:{
        default:()=>{
          return ''
        }
      },
      list:{
        default:()=>{
          return []
        }
      },
      // 显示
      value:{
        type:Array,
        default:()=>{
          return []
        }
      },
    },
    data() {
      return {
        show:false,
        inList:[],
        // checkList:[],
        checkEnd:[],
        max:1,
      };
    },
    model: {
      prop: 'value',
      event: 'input'
    },
    computed:{
      checkList(){
        let chose=this.inList.filter(item=>item.check)
        let values=chose.map(item=>item.value)
        let labelStr=chose.map(item=>item.label)
        this.$emit('selectValue',{chooseList:chose,labelStr,values,...this.item,idStr:values.join(',')})
        this.$emit('input',values)
        return this.inList.filter(item=>item.check)
      },
      inLabel(){
        let  labels=this.checkList.map(v=>v.label)
        return labels.join(',')
      },
    },
    mounted() {
    },
    methods: {
      remove(it,i){
        it.check=false
        this.confirm()
      },
      confirm(){
        this.upChange(false)
      },
      // 关闭
      close() {
        this.inList=this.inList.map(v=>({...v,check:false}))
      },
      // 更新显示状态
      upChange(val){
        this.openUp(val)
        // this.$emit('up',val)
      },
      // 选择
      check(item,index){
        let inList=JSON.parse(JSON.stringify(this.inList))
        // 多选
        if (this.max>1&&this.checkList.length<=this.max) {
          if (this.checkList.length===this.max) {
            if(item.check===false) {
              uni.showToast({
                icon:'none',
                title: `最多选择${this.max}个`
              })
            }
            item.check=false
          }else{
            item.check=!item.check
          }
          inList.splice(index,1,item)
        }
        if(this.max==1){
          inList=inList.map(v=>({...v,check:false}))
          item.check=true
          inList.splice(index,1,item)
        }
        this.inList=[...inList]
      },
      // 选中类
      isCheck(item){
        if (item.check) {
          return this.item.chooseClass||'icon_handle'
        }else{
          return this.item.noChooseClass||'icon_no'
        }
      },
      // 选中样式
      getStyle(item){
        if (item.check) {
          return {...this.item.chooseStyle}
        }else{
          return {...this.item.noChooseStyle}
        }
      },
      // 滚动到底部
      scrolltolower(info){
        this.$emit('buttom',{...info,tips:'滚到底了'})
      },
      openUp(val){
        this.show=val
        if (this.$refs.popup) {
          if (val) {
            this.$refs.popup.open&&this.$refs.popup.open('bottom')
          }else {
            this.$refs.popup.close&&this.$refs.popup.close()
          }
        }
      }
    },

    watch:{
      // 设置值
      value:{
        handler(val,oldVal) {
            if (val!==oldVal) {
               val=backType(val,'String')?val.split(','):val
              this.inList= this.inList.map(it=> ({...it,check:val.includes(it.value)}))
            }
        },
        immediate: true,
        deep: true
      },
      list:{
        handler(val,oldVal) {
          if (val!=oldVal) {
            this.inList= val.map(it=> {
              let obj={}
              if (typeof it ==='object') {
                obj=it
              }else{
                obj={value:it,label:it}
              }

              return {...obj,check:this.value.includes(obj.value)}
            })
          }
        },
        immediate: true,
        deep: true
      },
      item:{
        handler(val,oldVal) {
          if (val!=oldVal) {
            this.max=val.max||1
          }
        },
        immediate: true,
        deep: true
      },
    },

  };
</script>
<style lang="scss" scoped>
  @import "scss/iconfont.css";
  .popup{
    .popup_mask{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,.5);
    }
  }
  // ios底部安全区函数 $a必填,属性名.$b距离长度,非必填，不填就是0
  @mixin safe($a,$b:0) {
    &{#{$a}: #{$b};}
    @if($b==0){
      &{#{$a}: constant(safe-area-inset-bottom);}
      &{#{$a}: env(safe-area-inset-bottom);}
    }@else {
      &{#{$a}: calc(#{$b} + constant(safe-area-inset-bottom));}
      &{#{$a}: calc(#{$b} + env(safe-area-inset-bottom));}
    }
  }
  .myPop{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    .myPop_head{
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #eee;
      padding: 20rpx 20rpx;
      font-size: 24rpx;
      .myPop_cancel{

      }
      .myPop_name{

      }
      .myPop_confirm{

      }
    }
    .myPop_main{
      box-sizing: border-box;
      padding:0 30rpx;
      @include safe(padding-bottom,30rpx);
      overflow: auto;
      max-height:50vh;
      min-height: 30vh;
      .myPop_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx;
        border-bottom: 1rpx solid #eee;
      }
      .item_name{

      }
      .item_check.check{
        color: #f00;

      }
    }
  }
  .mySelect_show{
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .mySelect_l{
    flex-shrink: 1;
    width: 100%;
    .multi_buttons{
      display: flex;
      flex-wrap: wrap;
      .button{
        position: relative;
        margin: 0 20rpx 20rpx 0;
        padding: 0 14rpx;
        border-radius: 4rpx;
        line-height: 46rpx;
        font-size: 24rpx;
        background: #FF2C3B;
        color: #fff;
      }
      .button_close{
        position: absolute;
        right: -10rpx;
        top: -22rpx;
        z-index: 1;
        color: #888;
        font-size: 20rpx;
      }
    }

  }
  .mySelect_r{
    flex-shrink: 0;
    font-size: 28rpx;
    line-height: 40rpx;
  }
</style>
